﻿@{
    ViewBag.Title = "Steptwo";
    Layout = "~/Views/Shared/_Layout..cshtml";
}
<script type="text/javascript">

    $(document).ready(function () {

        $(".i-matched").draggable
             ({
                revert: true
             });
             
             $("#dropable").droppable
             ({
                 accept: ".i-matched",
                 activeClass: "drop-active",
                 hoverClass: "drop-hover",

                 drop: function (event, ui) 
                 {
                     var item = ui.draggable.html();
                     
//                     alert(item);
                     //var itemid = ui.draggable.attr("id");
                     //var val = ui.draggable.find(".i-matched").html();
                     var html = '<span class="i-matched">';
                     html = html + item + '</span>';
                     $("ul#dropable li.allow .i-unmatched").replaceWith(html);
                     $(ui.draggable).replaceWith("<span class='i-moved i-matched'>" + item + "</span>");
                 }
                
              });
             $("#dropable li").mouseover(
             function () {
                 $(this).addClass("allow");

             })
             $("#dropable li").mouseleave(
             function () {
                 $(this).removeClass("allow");
             })

    });
</script>
<form class="form" action="#">
<fieldset>
    <div class="content">
        <h2 class="app">
            <strong>Import Leads</strong> <span class="right"><a class="btn btn-leads-on" href="#">
                Leads On</a> <a class="btn btn-calls-off" href="#">Calls On</a> </span>
        </h2>
        <nav id="steps" class="steps steps-wide steps-blue">
                  <ul>
                    <li class="first done" style="z-index: 3;"><a href="#"><span>Step 1: Select File</span></a></li>
                    <li class="active" style="z-index: 2;"><a href="#"><span>Step 2: Match Headers</span></a></li>
                    <li class="last" style="z-index: 1;"><a href="#"><span>Step 3: Review and Import</span></a></li>
                  </ul>
                </nav>
        <div class="title nomargin">
            <h3>
                Select File to Upload</h3>
        </div>
        <div class="panel">
            <p>
                <strong>We have tried to match the column headers in your file to our standard header
                    names.</strong></p>
            <ul class="circle-number">
                <li><span class="n">1</span>Check the header names to make sure they correctly match.
                    You can also remove a header from the file by selecting the <strong>Delete</strong>
                    icon.</li>
                <li><span class="n">2</span>In some cases we could not automatically match the headers,
                    so please find the correct header name on the right and drag it to your name on
                    the left.</li>
            </ul>
            <div class="title nomargin">
                <h3>
                    Match Headers</h3>
            </div>
            <div class="toolbar">
                <div class="area full">
                    <span class="progress-info"><strong>17</strong> out of <strong>40</strong> headers matched
                    </span><span class="progress-bar" style="width: 963px;"><span class="pb-current"></span>
                    </span>
                </div>
            </div>
            <div class="match-header">
                <div class="mh-left">
                    <div class="f-view">
                        <strong>View</strong>
                        <label>
                            <input type="radio" name="radio1">
                            All</label>
                        <label>
                            <input type="radio" checked="checked" name="radio1">
                            Unmatched only</label>
                    </div>
                    <div class="mh-headers">
                        <span class="mh-hdr hdr1">Your Headers</span> <span class="mh-hdr hdr2">Matched Headers</span>
                    </div>
                    <ul id="dropable" class="mh-yhdrs-list">
                        <li><a class="btn btn-x-light" href="#">X</a> <span class="lb">First Name</span> <span
                            class="i-matched">First Name</span> </li>
                        <li class="active"><a class="btn btn-x-light" href="#">X</a> <span class="lb">Last Name</span>
                            <span class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="#">X</a> <span class="lb">Email Address</span>
                            <span class="i-unmatched"><span></span></span></li>
                        <li><a class="btn btn-x-light" href="#">X</a> <span class="lb">Phone Number</span> <span
                            class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="#">X</a> <span class="lb">Last Name</span> <span
                            class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="#">X</a> <span class="lb">Email Address</span>
                            <span class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="#">X</a> <span class="lb">Email Address 2</span>
                            <span class="i-unmatched"></span></li>
                        <li><a class="btn btn-x-light" href="#">X</a> <span class="lb">Email Address 2</span>
                            <span class="i-unmatched"></span></li>
                    </ul>
                </div>
                <div class="mh-right">
                    <div class="f-search">
                        <input type="text" value="Search Header Names" class="text">
                        <a class="btn btn-go" href="#">GO</a> <a class="btn btn-view-unmatched right" href="#">
                            View All</a>
                    </div>
                    <div class="mh-headers">
                        <span class="mh-hdr hdr1">Leads360 Headers</span>
                    </div>
                    <ul class="mh-360hdrs-list">
                        <li>
                            <h3>
                                Borrower Information</h3>
                                <span class="items-container">
                                    <span class="i-matched">First Name<input id="FirstName" type="hidden"/></span>
                                    <span class="i-matched">Email Address</span>
                                    <span class="i-matched">Email Address</span>
                                    <span class="i-matched">Last Name</span>
                                    <span class="i-matched">Phone Number</span>
                                    <span class="i-matched">First Name</span>
                                    <span class="i-matched">Email Address</span>
                                    <span class="i-matched">Email Address</span>
                                    <span class="i-matched">Last Name</span>
                                    <span class="i-matched">Phone Number</span>
                                    <span class="i-matched">First Name</span>
                                    <span class="i-matched">Email Address</span>
                                    <span class="i-matched">Email Address</span>
                                    <span class="i-matched">Last Name</span>
                                    <span class="i-matched">Phone Number</span>
                                </span>
                        </li>
                        <li>
                            <h3>
                                Main</h3>
                            <span class="items-container"><span class="i-matched">First Name</span> <span class="i-matched">
                                Email Address</span> <span class="i-matched">Email Address</span> <span class="i-matched">
                                    Last Name</span> <span class="i-matched">Phone Number</span> <span class="i-matched">
                                        First Name</span> <span class="i-matched">Email Address</span> <span class="i-matched">
                                            Email Address</span> <span class="i-matched">Last Name</span> <span class="i-matched">
                                                Phone Number</span> <span class="i-matched">First Name</span> <span class="i-matched">
                                                    Email Address</span> <span class="i-matched">Email Address</span>
                                <span class="i-matched">Last Name</span> <span class="i-matched">Phone Number</span>
                            </span></li>
                    </ul>
                </div>
            </div>
        </div>
        <h3 class="centered-wbtn centered-wbtn-bottom save">
            <a class="btn btn-back-light left" href="#">Back</a> <a class="btn btn-next-gray right"
                href="#">Next</a>
            <div class="clear">
            </div>
        </h3>
        <p class="legal">
            &copy; Copyright 2012 Leads360, Inc.</p>
    </div>
    <!-- //.content -->
</fieldset>
</form>
